<template>
  <div>
    <el-card shadow="always">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="height: 45px">
        <el-breadcrumb-item :to="{path:'/'}">
          <span>首页</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 筛选区域 -->
      <div class="screening">
        <!--        <el-select v-model="queryInfo.colleges"-->
        <!--                   placeholder="筛选学院"-->
        <!--                   size="small"-->
        <!--                   @change="handleQueryChange()">-->
        <!--          <el-option-->
        <!--              v-for="item in collegeList"-->
        <!--              :key="item.id"-->
        <!--              :label="item.name"-->
        <!--              :value="item.id">-->
        <!--          </el-option>-->
        <!--        </el-select>-->
        <!-- 搜索框 -->
        <el-input
            clearable
            placeholder="筛选主题"
            v-model="queryInfo.keyword"
            style="width: 200px;"
            size="small"
            @change="handleQueryChange"
        ></el-input>
      </div>
      <!-- 表格区域 -->
      <el-collapse v-model="activeId" accordion>
        <el-collapse-item v-for="activity in activityList" :key="activity.id"
                          :name="activity.id">
          <template slot="title">
            <span :class="{active:activeId===activity.id}">{{ activity.title }}</span>
            <div v-if="activeId!==activity.id"
                 style="font-size:12px;
                        position: absolute;
                        font-weight: lighter;
                        text-align: right;
                        right: 70px">
              {{ activity.createTime }}
            </div>
          </template>
          <div
              style="font-size:12px;
                        text-align: right;
                        padding-right: 30px">
            发布时间：{{ activity.createTime }}
            <br>
            报名时间：{{ activity.signStartTime + " 至 " + activity.signEndTime }}
            <br>
          </div>
          <hr style="margin-right: 10px">
          <div class="content" v-html="activity.content"></div>
          <div class="buttons" v-if="isStudent || isTeacher">
            <el-button v-if="dateValid(activity.signStartTime, activity.signEndTime)" type="success" style="margin-right: 20px" size="small"
                       class="signup" @click="signUp(activity)">我要报名
            </el-button>
            <el-button v-if="Date.parse(activity.signStartTime) > new Date()" type="success" style="margin-right: 20px" size="small"
                       class="signup" disabled >报名未开始
            </el-button>
            <el-button v-if="Date.parse(activity.signEndTime) < new Date()" type="success" style="margin-right: 20px" size="small"
                       class="signup" disabled >报名已结束
            </el-button>
            <!--            <el-button v-if="isUniversity" type="success" style="margin-right: 20px" size="small"-->
            <!--                       class="signup" @click="signUp(activity.id)">修改信息-->
            <!--            </el-button>-->
            <!--            <el-button type="info" plain size="small" class="transfer">转邀报名</el-button>-->
          </div>
        </el-collapse-item>
      </el-collapse>


      <!-- 分页 -->
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleQueryChange"
            :current-page.sync="queryInfo.pageNum"
            :page-sizes="[5, 10, 30, 50]"
            :page-size="queryInfo.pageSize"
            layout="sizes, prev, pager, next"
            :total="totalNum">
        </el-pagination>
      </div>


    </el-card>
  </div>
</template>
<script>
import FakeCollegeList from "@/views/activity/Index_blogs/fakeCollegeList";
import FakeActivities from "@/views/activity/activities/fakeActivities";
import CacheUtil from "@/utils/CacheUtil";
import RequestUtil from "@/utils/RequestUtil";

export default {
  data() {
    return {
      activeId: 0,
      isStudent: CacheUtil.isStudent(),
      isTeacher: CacheUtil.isTeacher(),
      isUniversity: CacheUtil.isUniversity(),
      activityList: [],
      queryInfo: {
        keyword: '',
        pageSize: 5,
        pageNum: 1,
        colleges: [],
      },
      totalNum: 0
    }
  },
  activated() {
    this.getActivityList();
  },
  methods: {
    dateValid(startDate, endDate){
      return Date.parse(endDate) > new Date() && new Date() > Date.parse(startDate)
    },
    getActivityList() {
      let that = this
      this.$axios.get(`${this.HOST}/activity/getActivityList`, {
        params: this.queryInfo
      }).then(res => {
        // console.log("r", res)
        this.activityList = res.data.data.list
        this.totalNum = res.data.data.total
      })
    },
    handleSizeChange(size){
      // console.log(size)
      this.queryInfo.pageSize = size
      this.getActivityList()
   },
    handleQueryChange() {
      console.log(this.queryInfo)
      this.getActivityList()
    },
    signUp(activity) {
      this.$router.push({
        name: 'activities_signup',
        params: {
          activityId: activity.id,
          activityName: activity.title
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.el-card {
  padding: 0 10px 10px;

  /deep/ .el-collapse-item__header {
    font-size: 15px;
    width: 100%;
    margin: auto;
    //font-weight: 500 !important;
  }
}

.active {
  font-weight: bolder;
  width: 100%;
  text-align: center;
  transition: 0.5s ease all;
}

.screening {
  margin-bottom: 10px;
}


.block {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-bottom: 10px;
}

/deep/ .el-collapse-item {
  margin-bottom: 5px;
}

/deep/ .el-collapse-item__header {
  box-shadow: none !important;
}

/deep/ .is-active {
  box-shadow: 0 0 5px 2px rgb(192, 189, 189);
}

/deep/ .el-collapse-item__wrap {
  padding-left: 20px;
  //  //border-radius: 5px;
  //  box-shadow: 0 3px 3px 2px rgb(192, 189, 189);
  //  //margin-bottom: 3px;
}

//
/deep/ .el-collapse-item__arrow {
  box-shadow: none !important;
}

/deep/ .el-button--success {
  background-color: #316a4b;

  &:focus {
    background-color: #3a7e59 !important;
  }
}


.buttons {
  display: flex;
  width: 100%;
  margin-top: 10px;
  padding-right: 50px;
  justify-content: flex-end;

  .signup {
    width: 100px;
    justify-self: center;

  }

  .transfer {
    margin-right: 20px;
  }
}

.el-button--success.is-disabled, .el-button--success.is-disabled:active, .el-button--success.is-disabled:focus, .el-button--success.is-disabled:hover{
  background-color: rgba(87, 120, 102, 0.56);
  color: #ece4e4;
}
</style>
